<template>
    <div id="app">
      <div id="left">
        <p>个人中心</p>
        <router-link to="/gerenzhongxin"><p class="p">我的订单</p></router-link>
        <router-link to="/gjibenxinxi"><p class="p">基本信息</p></router-link>
      </div>
      <div id="right">
        <router-view></router-view>
      </div>
   
    </div>
    
</template>
<script>
    import axios from 'axios'
    export default {
      name: 'gerenzhongxin',
      data(){
        return{
          title:"订单信息",
          
    
        }
    
      },
      components: {
      },
      methods:{
        
      }
    }
    </script>
<style scoped>
  *{
    padding:0px;
    margin:0px;
  }
  #app{
    display:flex;
  }
  #left{
    width:200px;
    height: 500px;
    /* background-color:aqua;  */
       border:solid 2px orange;
  }
  #right{
    width:900px;
    height: 500px;
    /* background-color:aqua; */
    border-right:solid 2px orange;
    border-top:solid 2px orange;
    border-bottom:solid 2px orange;
  }
  #left p{
    padding:15px;

    padding-left:60px ;
    box-sizing: border-box;
  }
  #right p{
    padding:15px;
    padding-left:60px ;
    box-sizing: border-box;
    color:orange;
    padding-left:400px;
  }
  #right p:nth-of-type(1){
    border-bottom:solid 2px orange;
    height: 60px;
    font-size: 25px;
  }
  #left p:nth-of-type(1){
    border-bottom:solid 2px orange;
    height: 60px;
  }
  #left p:nth-of-type(2){
    margin-top:10px;
  }
  #left  .p:nth-of-type(2):hover{
    background-color:red;
  }
  #left .p:nth-of-type(1):hover{
    background-color:red;
  }

</style>
